<template>
  <view class="pay-verify">
    <view class="step">
      <view class="title">1.1 开通系统收款（建行被扫支付服务）流程</view>
      <view class="link">如需帮助请联系：傲雪棋技术部-李建民</view>
      <view class="data">
        <view class="l">准备资料:</view>
        <view class="r">
          <text>1.营业执照</text>
          <br />
          <text>2.身份证</text>
          <br />
          <text>3.建设储蓄卡</text>
          <br />
          <text class="code">4.机构码：440667210</text>
        </view>
      </view>
    </view>

    <view class="step">
      <view class="title">1.2 打开微信、公众号搜索【建行龙支付】并关注。</view>
      <view class="image">
        <image
          :data-index="1"
          @tap="previewImage"
          :src="'pay-verify/step1.png' | prefixOssUrl"
          mode
        />
      </view>
    </view>

    <view class="step">
      <view class="title">1.3 进入公众号、点击右下角【个人中心】进入【商户服务】</view>
      <view class="image">
        <image :src="'pay-verify/step2.png' | prefixOssUrl" mode />
      </view>
    </view>

    <view class="step">
      <view class="title">1.4 点击【申请商户服务】</view>
      <view class="image">
        <image :src="'pay-verify/step3.png' | prefixOssUrl" mode />
      </view>
    </view>

    <view class="step">
      <view class="title">1.5 选择【建行收单商户】</view>
      <view class="image">
        <image :src="'pay-verify/step4.png' | prefixOssUrl" mode />
      </view>
    </view>

    <view class="step">
      <view class="title">1.6 填写相关资料</view>
      <view class="image-tips">
        <image :src="'pay-verify/step5.png' | prefixOssUrl" mode="aspectFit" />
        <image :src="'pay-verify/step6.png' | prefixOssUrl" mode="aspectFit" />
        <image class="part-img" :src="'pay-verify/step7.png' | prefixOssUrl" mode="aspectFit" />
      </view>
    </view>

    <view class="step">
      <view class="title">1.7 填写证件信息</view>
      <view class="image-tips">
        <image :src="'pay-verify/step8.png' | prefixOssUrl" mode />
        <image class="part-img" :src="'pay-verify/step9.png' | prefixOssUrl" mode />
      </view>
    </view>

    <view class="step">
      <view class="title">1.8 阅读信息【个人征信客户授权书】</view>
      <view class="image-tips">
        <image :src="'pay-verify/step10.png' | prefixOssUrl" mode />
        <image :src="'pay-verify/step11.png' | prefixOssUrl" mode />
      </view>
    </view>

    <view class="step">
      <view class="title">
        1.9 点击【提交】后，申请商户即可成功。建行会向商户
        的手机发送通知消息。
      </view>
    </view>
  </view>
</template>

<script>
export default {
}
</script>

<style lang="less">
page {
  background-color: #f7f7f7;

  .pay-verify {
    padding: 30rpx;

    .step {
      margin-bottom: 30rpx;

      .title {
        font-size: 29rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .link {
        margin-top: 10rpx;
        margin-left: 52rpx;
        font-size: 26rpx;
      }

      .data {
        margin-top: 10rpx;
        margin-left: 52rpx;
        display: flex;
        align-items: flex-start;
        font-size: 28rpx;
        user-select: auto;
      }

      .image {
        margin-top: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        image {
          width: 350rpx;
          height: 700rpx;
        }
      }

      .image-tips {
        margin-top: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        image {
          width: 600rpx;
          height: 550rpx;
        }
        .part-img {
          margin-top: 20rpx;
          width: 600rpx;
          height: 300rpx;
        }
      }
    }
  }
}
</style>
